<script lang="ts" setup>
import { useRoute } from "vue-router";
import {onMounted, reactive, ref, watch} from "vue"
import { requestSingerAllMV } from "../../../utils/axiosURL"
import useSingerID from "../../../store/singerID";
const singerID = useSingerID()

// query id
const route = useRoute()
const SingerQueryID = ref<any>(route.query.id)
// 是否还有更多mv
const moreMV = ref<boolean>(true)
// 分页页码
const pageNum = ref<number>(0)
// 存储mv数据
let MVDataArr = reactive<any>([])

onMounted(() => {
  requestSingerAllMVFn()
})

watch(pageNum, () => {
  requestSingerAllMVFn()
})

const requestSingerAllMVFn = () => {
  requestSingerAllMV(SingerQueryID.value, pageNum.value).then((data: any) => {
    moreMV.value = data.hasMore
    MVDataArr.values = data.mvs
  }).catch(_ => { })
}

// 上一页事件处理函数
const prevFn = () => {
  if (pageNum.value <= 0) return
  pageNum.value--
}

// 下一页事件处理函数
const nextFn = () => {
  if (!moreMV.value) return
  pageNum.value++
}

</script>

<template>
<div class="MVWrap">
  <MVItem
    v-if="MVDataArr.values.length"
    v-for="item in MVDataArr.values"
    :name="item.name"
    :imgurl16v9="item.imgurl16v9"
    :duration="item.duration"
    :playCount="item.playCount"
    :id="item.id"
  />
  <MVItemSkeleton v-else v-for="item in 15" />
  <div class="prevAndNest" v-if="MVDataArr.values.length">
    <p class="prevPage" @click="prevFn">
      <span class="iconfont icon-xiangzuojiantou"></span>
      <span>上一页</span>
    </p>
    <p class="nextPage" v-if="moreMV" @click="nextFn">
      <span>下一页</span>
      <span class="iconfont icon-xiangyoujiantou"></span>
    </p>
  </div>
</div>
</template>

<style lang="scss" scoped>
.MVWrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 20px auto 0;
  padding-left: 30px;
  box-sizing: border-box;

  .prevAndNest {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 20px;
    margin-top: 30px;
    padding-right: 30px;
    box-sizing: border-box;
    color: $font_main_color;
    font-size: $font-size-sm;
    cursor: pointer;

    .icon-xiangyoujiantou,
    .icon-xiangzuojiantou {
      vertical-align: 1px;
      font-size: $font-size-xs;
    }
  }
}
</style>
